<template>
  <div class="chart" ref="chart"></div>
</template>
<style lang="scss">
.empty{
    text-align:center;
    width:100%;
    height:100%;
    color:#ccc;
    font-size:13px;
}
</style>
<script type="text/ecmascript-6">
import d3 from '../../util/d3';
import RadarChart from '../../util/d3_chart/radar-chart';

export default {
  props: ['chartData'],
  data(){
    return {
       items: {
            'recent_active_rate': 0,
            'total_enroll_rank': 0,
            'has_comment_rank': 0,
            'interactive_rank': 0,
            'discussion_rank': 0
        }
    }
  },
  computed: {
    element() {
      return this.$refs.chart;
    }
  },
  methods: {
    renderChart() {
      let data = this.items;
      this.element.innerHTML = '';
      if (data) {
        let chart = RadarChart.chart();
        let config = {
          axisText: true,
          levels: 5,
          w: 263,
          h: 263
        };
        let svg = d3.select(this.element).append('svg').attr('width', config.w + 17).attr('height', config.h + 3)
        chart.config(config)
        svg.append('g').datum([{
          axes: [{
            axis: "1",
            value: data.recent_active_rank * 100,
          }, {
            axis: "2",
            value: data.total_enroll_rank * 100,
          }, {
            axis: "3",
            value: data.has_comment_rank * 100,
          }, {
            axis: "4",
            value: data.interactive_rank * 100,
          }, {
            axis: "5",
            value: data.discussion_rank * 100,
          }],
          colors: ["#009ee3", "#0cc99a", "#ec482c", "#8957a1", "#ea68a2"]
        }]).call(chart);
      } else {
        this.element.innerHTML = '<div class="empty" style="color:rgba(255, 255, 255, .3)">暂无数据</div>';
      }
    },
  },
  watch: {
      chartData:{
        immediate: true,
        handler(val){
          this.items = val;
          this.$nextTick(() => {
                this.renderChart();
           });
        }
      }
  },
  mounted() {
    this.items = this.chartData;
    this.$nextTick(() => {
      this.renderChart();
    })
  }
}
</script>
<style lang="scss">
.chart{
    svg{
        display:block;
        margin:0 auto;
    }
}
.radar-chart {
  .circle {
    fill-opacity: .9;
    transition: opacity 300ms, fill-opacity 200ms;
    opacity: 1;
  }

  &.focus {
    .area {
      fill-opacity: .7;
      &.focused {
        fill-opacity: .9;
      }
    }
  }
  .area {
    stroke-width: 1;
    fill-opacity: .7;
    transition: opacity 300ms, fill-opacity 200ms;
    opacity: 1;
  }
  .area.health,
  .health .circle {
    fill: #28fff7;
    stroke: #009ee3;
    stroke-width: 1;
    stroke-linecap: round;
  }
  .level {
    stroke: #e0e0e0;
    stroke-width: 1;
    opacity: 0.9;
  }
  .axis {
    line {
      stroke: #e0e0e0;
      stroke-width: 1;
      opacity: 0.4;
    }
    .legend {
      font-family: sans-serif;
      font-size: 12px;
    }
    .legend.top {
      dy: 1em;
    }
    .legend.left {
      text-anchor: left;
    }
    .legend.middle {
      text-anchor: middle;
    }
    .legend.right {
      text-anchor: right;
    }
  }
  .tooltip {
    font-family: sans-serif;
    font-size: 13px;
    transition: opacity 200ms;
    opacity: 1;
  }
  .tooltip.visible {
    opacity: 1;
  }
  .level-group-4 .level {
    stroke-width: 1;
  }
  .labeltext {
    font-size: 12px;
    opacity: 1;
    fill: #e0e0e0;
  }
  .d3-enter, .d3-exit {
    opacity: 0;
  }
}
</style>

